import React, { PropTypes } from 'react';

// Link和IndexLink组件为用户提供导航的操作
import { Link, IndexLink } from 'react-router';

function Main(props) {
  return (
    <div>
      <ul>
          {/*activeStyle属性来让Link组件在激活状态下变为红色。*/}
          {/*IndexLink适合导航 '/'， 防止如下副作用: 你使用了＜Link to="/"＞Home＜/Link＞去导航/这个URL，那么只要进入以/开头的URL时，Link组件都会被激活。*/}
          <li><IndexLink to="/" activeStyle={{ color: 'red' }}>Home</IndexLink></li>
          <li><Link to="/counter" activeStyle={{ color: 'red' }}>Counter</Link></li>
      </ul>
      {/* this will render the child routes */}
      {React.cloneElement(props.children, props)}
    </div>
  );
}
Main.propTypes = {
  children: PropTypes.any.isRequired
};

export default Main;
